<template>
    <div class="mt-16px">
        <div v-if="!hideHead" class="border-bottom pd-b-10 flex flex-jc-sb">
            <div class="fs-16 bold">筛选</div>
            <div class="flex gap-16px">
                <slot name="head-button"></slot>
                <div v-if="showUpload" class="flex pointer items-center" @click="handleUpload">
                    <el-icon color="#9497B1">
                        <IconCusUpload />
                    </el-icon>
                    <div class="fc-lightgrey unselect mg-l-5 fs-14">上传</div>
                </div>
                <div v-if="showExport" class="flex pointer items-center" @click="handleExport">
                    <el-icon color="#9497B1">
                        <IconCusExport />
                    </el-icon>
                    <div class="fc-lightgrey unselect mg-l-5 fs-14">导出</div>
                </div>
                <div v-if="showAdd" class="flex pointer items-center" @click="handleAdd">
                    <el-icon color="#9497B1">
                        <Plus />
                    </el-icon>
                    <div class="fc-lightgrey unselect mg-l-5 fs-14">新增</div>
                </div>
                <div v-if="showClear" class="flex pointer items-center" @click="handleClear">
                    <img src="../../assets/image/容器.png" class="w-16px" alt="" />
                    <div class="fc-lightgrey unselect mg-l-5 fs-14">清除</div>
                </div>
            </div>
        </div>
        <div class="flex" :class="{ 'mg-t-20': !hideHead }">
            <div class="left-item flex gap-16px fs-14 flex-1">
                <el-input v-if="filters.searchValue" v-model="filters.searchValue.value" class="w-300 m-2"
                    :placeholder="filters.searchValue.placeholder || '请输入'" prefix-icon="Search" clearable
                    @input="handleInput(filters.searchValue)" />
                <div class="w-full">
                    <el-row gutter="14">
                        <el-col v-for="(i, index) in gridData" :key="index" :span="i.span ?? 6"
                            :class="{ 'full': i.isFull }">
                            <div v-if="!i.hide" class="flex items-center mb-14px">
                                <div class="label">{{ i.name || i.label }}：</div>
                                <div class="flex-1">
                                    <el-input v-if="i.type === 'input'" v-model="i.value" clearable
                                        :placeholder="i.placeholder || '请输入'" @input="handleInput(i)" />
                                    <el-select v-if="i.type === 'select'" v-model="i.value" class="w-full" clearable
                                        :filterable="i.filterable ?? false" :placeholder="i.placeholder || '请选择'"
                                        @focus="i.handleFocus && i.handleFocus(i)" @change="doSelectChange(i)">
                                        <el-option v-for="item in i.options"
                                            :key="item[i?.defaultAttrs?.value || 'value']"
                                            :label="item[i?.defaultAttrs?.label || 'label']"
                                            :value="item[i?.defaultAttrs?.value || 'value']" />
                                    </el-select>
                                    <template v-if="i.type === 'inputSelect'">
                                        <el-select v-model="i.value" filterable remote class="w-full" clearable
                                            :multiple="i.multiple" :placeholder="i.placeholder"
                                            @change="doSelectChange(i)" @focus="i.handleFocus && i.handleFocus(i)"
                                            :remote-method="(val) => i.remoteMethod(val, i)">
                                            <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                                :label="item[i.defaultAttrs.label]"
                                                :value="item[i.defaultAttrs.value]" />
                                        </el-select>
                                    </template>
                                    <el-date-picker v-if="i.type === 'date'" class="w-full w-date-full"
                                        :clearable="!i.noClear" v-model="i.value" :type="i.dateType || 'date'"
                                        :value-format="i.valueFormat || 'YYYY-MM-DD'"
                                        :placeholder="i.placeholder || '请选择日期'" range-separator="-"
                                        start-placeholder="开始时间" end-placeholder="结束时间" @change="doSelectChange(i)" />
                                    <div v-if="i.type === 'radiogroup'" :style="{ 'min-width': `${i.width}px` }">
                                        <el-radio-group v-model="i.value" @change="doSelectChange(i)">
                                            <el-radio v-for="item in i.options"
                                                :key="item[i?.defaultAttrs?.value || 'value']"
                                                :label="item[i?.defaultAttrs?.value || 'value']">{{
                                                    item[i?.defaultAttrs?.label || "label"]
                                                }}</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <el-checkbox-group v-if="i.type === 'checkgroup'" v-model="i.value"
                                        @change="handleCheckboxChange(i)">
                                        <el-checkbox v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                            :label="item[i.defaultAttrs.value]">{{
                                                item[i.defaultAttrs.label] }}</el-checkbox>
                                    </el-checkbox-group>
                                    <el-cascader v-if="i.type === 'cascader'" class="w-full" v-model="i.value"
                                        :options="i.options" :props="i.props" @change="doSelectChange(i)"
                                        @focus="i.handleFocus(i)" clearable />

                                    <selectDept v-if="i.type === 'selectDept'" v-model:value="i.value"
                                        @change="doSelectChange(i)" />

                                    <selectDeptMember ref="selectDeptMemberRef" v-if="i.type === 'selectDeptMember'"
                                        :dept-id="i.deptId" v-model:value="i.value" @change="doSelectChange(i)" />
                                </div>
                            </div>
                        </el-col>
                        <el-col v-if="filters.noEmit" :span="6">
                            <el-button type="primary" @click="onDoSearch">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="right-item">
                <slot name="right">
                    <template v-for="(i, index) in filters.buttonList" :key="index">
                        <div>
                            <el-button v-if="isCusIcon(i.icon)" type="primary" @click="i.click">
                                <el-icon class="mg-r-5">
                                    <slot :name="i.icon"></slot>
                                </el-icon>
                                {{ i.name }}
                            </el-button>
                            <el-button v-else type="primary" :icon="i.icon" @click="i.click">
                                {{ i.name }}
                            </el-button>
                        </div>
                    </template>
                </slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { cloneDeep } from 'lodash'
import selectDept from './selectDept.vue'
import selectDeptMember from './selectDeptMember.vue'
/**
 * filterData: {
 *  noEmit: false,  是否需要立即调用接口
 *  list: [   筛选项列表
 *      name: 名称,
        prop: 后端需要的字段名,
        value: 值,
        placeholder: 默认提示,
        noEmit: 布尔值  如果不需要改动后立即调接口 可设置为true
        type: 类型 input,select,等  根据这个类型判断使用哪个element组件
        inputType: 类型为input时有， 对应input的type
        options: 类型为select时有,  select的options选项
        defaultAttrs: {   类型为select时有   option对应的label 和value
            label: '',
            value: ''
        },
        handleFocus: (item) => {} 获焦事件
        handleChange: (item) => {}  change事件
        handleInput: (item) => {} input事件
 *  ]，
    buttonlist: [   //右侧按钮组
        {
            icon: 图标,
            name: 按钮名称,
            click: () => {}  点击事件
        }
    ]
 * }
 *
 */

const props = defineProps({
    filterData: {
        type: Object,
    },
    showClear: {
        type: Boolean,
        default: true,
    },
    showUpload: {
        type: Boolean,
        default: false,
    },
    showExport: {
        type: Boolean,
        default: false,
    },
    showAdd: {
        type: Boolean,
        default: false,
    },
    hideHead: {
        type: Boolean,
        default: false,
    },
    minWidth: {
        type: Number,
        default: 250,
    },
})

const emits = defineEmits(['update:filterData', 'doSearch', 'upload', 'export'])

const filters = ref({})

const selectDeptMemberRef = ref(null)

const gridData = ref({})

const handleClear = () => {
    for (const key in filters.value) {
        if (key === 'searchValue') {
            filters.value[key].value = ''
        }
        if (key === 'list') {
            if (Array.isArray(filters.value[key])) {
                filters.value[key].forEach((i) => {
                    if (Object.prototype.hasOwnProperty.call(i, 'initValue')) {
                        i.value = i.initValue
                    } else {
                        i.value = Array.isArray(i.value) ? [] : ''
                    }
                    if (i.clearOption) {
                        i.options = []
                    }
                })
            } else {
                for (const prop in filters.value[key]) {
                    if (
                        Object.prototype.hasOwnProperty.call(filters.value[key][prop], 'initValue')
                    ) {
                        filters.value[key][prop].value = filters.value[key][prop].initValue
                    } else {
                        filters.value[key][prop].value = Array.isArray(filters.value[key][prop].value)
                            ? []
                            : ''
                    }
                    if (filters.value[key][prop].clearOption) {
                        filters.value[key][prop].options = []
                    }
                }
            }
        }
    }
    emits('update:filterData', filters.value)
    emits('doSearch')
}

let timer = null
const handleInput = (item) => {
    item.value = item.value.trim()
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        emits('update:filterData', filters.value)
        if (!filters.value.noEmit && !item.noEmit) {
            emits('doSearch')
        }
    }, 300)
}

const doSelectChange = (item) => {
    item.handleChange && item.handleChange(item)
    // 有的不需要立即执行接口
    if (!filters.value.noEmit && !item.noEmit) {
        emits('doSearch')
    }
}

const handleCheckboxChange = (item) => {
    item.handleChange && item.handleChange(item)
    // 有的不需要立即执行接口
    if (!filters.value.noEmit && !item.noEmit) {
        emits('doSearch')
    }
}

const onDoSearch = () => {
    emits('update:filterData', filters.value)
    emits('doSearch')
}

const handleUpload = () => {
    emits('upload')
}

const handleExport = () => {
    emits('export')
}
const handleAdd = () => {
    emits('add')
}
watch(
    () => props.filterData,
    (newval) => {
        console.log(111, newval)
        filters.value = cloneDeep(newval)

        if (newval.list) {
            for (const key in newval.list) {
                gridData.value[key] = newval.list[key]
            }
        }
    },
    {
        immediate: true,
        deep: true,
    }
)

const isCusIcon = computed(() => {
    return (name) => {
        return name?.startsWith('Icon')
    }
})
</script>

<style lang="scss" scoped>
.w-300 {
    width: 300px;
}

.w-16 {
    width: 16px;
}

.label {
    white-space: nowrap;
}

.grid {
    width: 100%;
    display: grid;
    // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

.full {
    grid-row-start: none;
}

.set-lh {
    line-height: 36px;
}

:deep(.set-fs .el-range-input) {
    font-size: 12px !important;
}
</style>
